<script setup>
import { ref, watch, onMounted } from "vue";
// import BUTTON from "../../components/Button/button.vue"
import { WalletFilled, Fold, ArrowDown } from "@element-plus/icons-vue";
import { ClickOutside } from "element-plus";
const headerArr = ref([
  { name: 'HOME', path: '/' },
  { name: 'ETCH', path: '/ETCH' },
  { name: 'RUNE', path: '/RUNE' },
  { name: 'POOL', path: '/POOL' },
  { name: 'SWAP', path: '/SWAP' },
  { name: 'ANALYTICS', path: '/ANAL' },
])
const VIEWPORT_WIDTH_THRESHOLD = ref(1000);
const isViewportWidthLessThan1000 = ref(true);
const show = ref(false)
// 
const showlost = () => {
  show.value = !show.value
}
const innerWidth = ref(false)
onMounted(() => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
})
const handleResize = () => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
};
watch(() => window.innerWidth, handleResize);
const hideshow = ref(false)
const ShowList = () => {
  console.log('展示导航');
}

</script>

<template>
  <div>
    <el-row>
      <el-col :xs="2" :sm="4" :md="2">
        <div class="grid-content ep-bg-purple" />
      </el-col>
        <el-col :xs="10" :sm="8" :md="10">
        <div class="KOheader">
          <el-link type="primary">
            <router-link to="/">
              <img src="../../image/组 26.png" alt="">
              <!-- <span id="span">
              KOI
            </span> -->
            </router-link>
          </el-link>
          <el-link type="primary" v-for="(item, index) in headerArr" :key="index" class="phone">
            <!-- v-if="hideshow" -->
            <router-link :to="item.path">
              <span>
                {{ item.name }}
              </span></router-link>
          </el-link>
        </div>
      </el-col>
      <el-col :xs="10" :sm="5" :md="6">
        <div class="butotn">
          <el-button round :icon="WalletFilled" @click="showlost">Connect Wallet</el-button>
        </div>
        <img v-if="show" style=" position: absolute; right: 6.5%;top: 80%;  width: 120px; height: 100px;"
          src="../../assets/logimg/标志 3 563@2x.png" alt="">
        <div class="showlog" v-if="show">
          <div style="color:white; text-align: center; padding: 10px;">
            0.06 BNB
          </div>
          <div style="display:flex; justify-content: center; align-items: center; margin-bottom: 5px;margin-top: -5px;">
            <img style="width: 1.225rem; height: 1.225rem; margin-right: 0.325rem;"
              src="../../assets/logimg/卡片形式 拷贝@2x.png" alt="">
            <p>My Runes</p>
            <img style="width: 0.325rem; height: 0.325rem; margin-left: 0.325rem;" src="../../assets/logimg/前往 拷贝@2x.png"
              alt="">
          </div>
          <div style="display:flex; justify-content: center; align-items: center;">
            <img style="width: 1.225rem; height: 1.225rem;margin-right: 0.325rem;" src="../../assets/logimg/退出 拷贝@2x.png"
              alt="">
            <p style="margin-right: 0.25rem;">Disconnect</p>
          </div>
        </div>
      </el-col>
      <el-col :xs="2" :sm="7" :md="6">
        <div class="iocnclass">
          <el-dropdown class="phoneList">
            <span class="el-dropdown-link">
              <!-- Dropdown List -->
              <el-icon class="el-icon--right" style="font-size: 20px;">
                <Fold />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(item,index) in headerArr" :key="index">
                  <router-link :to="item.path">
                    {{ item.name }}
                  </router-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
#span {
  font-weight: 700;
  font-family: 楷体;
  color: rgb(242, 35, 116);
  font-size: 18px;
}

@media screen and (max-width: 1000px) {
  .phone {
    display: none;
  }
}

@media screen and (min-width: 1000px) {
  .phoneList {
    display: none;
  }
}
.el-link {
  margin-right: 28px;
  font-weight: normal;
  line-height: 3.125rem;

  & span {
    color: white;
    // font-weight: 700;
    vertical-align: middle;

    & img {
      // width: 1.875rem;
      height: 1.875rem;
      vertical-align: middle;
    }
  }
}

.butotn {
  margin-left: 4px;
  height: 3.5rem;
  line-height: 3.5rem;
  position: absolute;
  right: 5%;
  top: 0;
}

.iocnclass {
  height: 4.2rem;
}

.el-dropdown {
  height: 4.2rem;
  line-height: 4.2rem;
  border: none;
}

.el-button {
  // background-color: rgb(105, 56, 151);
  background: linear-gradient(to right, rgb(198, 66, 189), rgb(120, 150, 255));
  border: 0;
  color: white;
  margin-right: .625rem;
}

::v-deep .el-icon {
  color: rgb(255, 255, 255);
}

.showlog{
  width: 120px;
  height: 100px;
  position: absolute;
  right: 6.5%;
  top: 80%;
  border-radius: 10px;
}
</style>